<template>
  <div class="contact-actions">
    <!-- 发送信息按钮 -->
    <ActionButton
      :icon="MessageCircle"
      variant="primary"
      tooltip="发送消息"
      @click="handleSendMessage"
    />

    <!-- 查看按钮 -->
    <ActionButton :icon="Eye" variant="info" tooltip="查看详情" @click="handleViewContact" />

    <!-- 语音通话按钮 - 仅在线时显示 -->
    <ActionButton
      v-if="contact.status === 'online'"
      :icon="Phone"
      variant="success"
      tooltip="语音通话"
      @click="handleCall"
    />

    <!-- 视频通话按钮 - 仅在线时显示 -->
    <ActionButton
      v-if="contact.status === 'online'"
      :icon="Video"
      variant="info"
      tooltip="视频通话"
      @click="handleVideoCall"
    />

    <!-- 更多操作按钮 -->
    <ActionButton
      :icon="MoreHorizontal"
      variant="secondary"
      tooltip="更多操作"
      @click="handleMoreActions"
    />
  </div>
</template>

<script setup lang="ts">
import { MessageCircle, Eye, Phone, Video, MoreHorizontal } from 'lucide-vue-next'
import ActionButton from './ActionButton.vue'
import type { Contact } from '../types'

interface Props {
  contact: Contact
}

interface Emits {
  (e: 'send-message', contact: Contact): void
  (e: 'view-contact', contact: Contact): void
  (e: 'call', contact: Contact): void
  (e: 'video-call', contact: Contact): void
  (e: 'more-actions', contact: Contact): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const handleSendMessage = (): void => {
  emit('send-message', props.contact)
}

const handleViewContact = (): void => {
  emit('view-contact', props.contact)
}

const handleCall = (): void => {
  emit('call', props.contact)
}

const handleVideoCall = (): void => {
  emit('video-call', props.contact)
}

const handleMoreActions = (): void => {
  emit('more-actions', props.contact)
}
</script>

<style scoped>
.contact-actions {
  display: flex;
  gap: 8px;
  margin-left: 16px;
  align-items: center;
}

/* 响应式设计 - 在小屏幕上隐藏部分按钮 */
@media (max-width: 768px) {
  .contact-actions {
    gap: 6px;
  }

  /* 在移动端只显示主要操作 */
  .contact-actions > :nth-child(n + 4) {
    display: none;
  }
}

@media (max-width: 480px) {
  .contact-actions {
    gap: 4px;
  }

  /* 在很小的屏幕上只显示发送消息和更多操作 */
  .contact-actions > :nth-child(n + 3) {
    display: none;
  }
}
</style>
